<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>个人主页</title>
<link href="${base}/css/globle.css" rel="stylesheet" type="text/css" />
<link href="${base}/css/icon.css" rel="stylesheet" type="text/css" />
<link href="${base}/editor/themes/default/default.css"" rel="stylesheet" type="text/css" />
<style>
.content{
	padding: 80px 0;
}
.regist-box{
	width:800px;
	margin:auto;
}
.regist-box table{
	width: 600px;
	margin: auto;
}
table .btn{
	background-color: #00A2CA;
	color: #FFF;
}
table .btn:hover{
	background-color: #33B5D4;
}
table .error{
	display: none;
}
table input{
	width: 180px;
}
table tr{
	height: 45px;
}
#school-selector{
	width: 500px;
}
#school-selector ul{
	border: 1px solid #CCC;
	margin: 2px;
}
#school-selector li{
	float: left;
	margin: 2px;
	padding: 2px;
}
#school-selector li.active{
	background: #888;
	color: #FFF;
}
#school-list{
	height: 200px;
	overflow-y: scroll;
}
#school-list li{
	width: 220px;
}
</style>
</head>

<body>
<#include "/WEB-INF/tpl/_header.html">
<div class="content">
	<div class="box regist-box">
		<h3>注册</h3>
		<form id="form" action="regist/saveUser" method="post" onsubmit="return formValidate(this)">
		<table class="user-info">
			<tbody>
			<tr>
				<td width="100"><label>用户名</label></td>
				<td width="200"><input id="username" name="username" type="text"/></td>
				<td><div inputid="username" class="icon icon-warning-red error">用户名不符合规范</div></td>
			</tr>
			<tr>
				<td width="100"><label>真实姓名</label></td>
				<td width="200"><input id="realname" name="realname" type="text" validate="realname"/></td>
				<td><div inputid="realname" class="icon icon-warning-red error">姓名不符合规范</div></td>
			</tr>
			<tr>
				<td width="100"><label>性别</label></td>
				<td width="200">
				<select name="sex">
				<option value="男">男</option>
				<option value="女">女</option>
				</select>
				</td>
			</tr>
			<tr>
				<td><label>学校</label></td>
				<td><input type="text" id="school" name="university" readonly="true"/></td>
				<td></td>
			</tr>
			<tr>
				<td><label>邮箱</label></td>
				<td><input id="email" type="text" name="email" validate="email"/></td>
				<td><div inputid="email" class="icon icon-warning-red error">邮箱地址不符合规范</div></td>
			</tr>
			<tr>
				<td><label>密码</label></td>
				<td><input id="pwd"  type="password" name="pwd"/></td>
				<td><div inputid="pwd" class="icon icon-warning-red error">密码不符合规范</div></td>
			</tr>
			<tr>
				<td><label>确认密码</label></td>
				<td><input id="_pwd" type="password"/></td>
				<td><div inputid="_pwd" class="icon icon-warning-red error">密码前后不一致</div></td>
			</tr>
			<tr>
				<td colspan="2" ><a class="btn fill" onclick="$('#form').submit()">注册</a></td>
			</tr>
			</tbody>
		</table>
		</form>
	</div>
	<div class="fclear"></div>
</div>
<#include "/WEB-INF/tpl/_footer.html">
<div id="dialog" class="hide">
	<div id="school-selector">
		<ul id="province-list">
			<li>北京</li>
			<li>上海</li>
			<li>天津</li>
			<li>重庆</li>
			<div class="fclear"></div>
		</ul>
		<ul id="city-list">
			<li>北京</li>
			<li>上海</li>
			<li>天津</li>
			<li>重庆</li>
			<div class="fclear"></div>
		</ul>
		<ul id="area-list">
			<li>北京</li>
			<li>上海</li>
			<li>天津</li>
			<li class="active">重庆</li>
			<li>黑龙江</li>
			<div class="fclear"></div>
		</ul>
		<ul id="school-list">
			<li>北京</li>
			<li>上海</li>
			<li>天津</li>
			<li>重庆</li>
			<li>黑龙江</li>
			<li class="active">吉林</li>
			<div class="fclear"></div>
		</ul>
	</div>
</div>
</body>
</html>

<script src="${base}/js/jquery1.1.js"></script>
<script src="${base}/js/globle.js"></script>
<script src="${base}/editor/kindeditor-all-min.js"></script>
<script csrc="${base}/editor/lang/zh_CN.js"></script>
<script src="${base}/js/formvalidate.js"></script>
<script>
	KindEditor.ready(function(K) {
		K('#school').focus(function() {
			var dialog = K.dialog({
				title : '选择学校',
				body : '<div style="margin:10px;">'+$('#dialog').html()+'</div>',
				closeBtn : {
					name : '关闭',
					click : function(e) {
						dialog.remove();
					}
				},
				yesBtn : {
					name : '确定',
					click : function(e) {
						$("#school").val($("#dialog #school-list li.active").text())
						dialog.remove();
					}
				},
				noBtn : {
					name : '取消',
					click : function(e) {
						dialog.remove();
					}
				}
			});
		});
	});
</script>

